<template>
  <div>
    <a-card :bordered="false" :bodyStyle="tstyle">
      <div class="table-page-search-wrapper" v-if="hasPerm('biIndexType:page')">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="10">
              <a-form-item label="名称">
                <a-input v-model="queryParam.name" allow-clear placeholder="请输入名称" />
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="10">
              <a-form-item label="状态">
                <!-- <a-input v-model="queryParam.description" allow-clear placeholder="请输入说明" /> -->
                <a-select
                  v-model="queryParam.isEnable"
                  aria-selected="全部"
                  allow-clear
                  placeholder="请选择状态"
                >
                  <a-select-option value=""> 全部 </a-select-option>
                  <a-select-option value="1"> 启用 </a-select-option>
                  <a-select-option value="0"> 停用 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="10">
              <a-form-item label="是否默认">
                <!-- <a-input v-model="queryParam.description" allow-clear placeholder="请输入说明" /> -->
                <a-select
                  v-model="queryParam.isDefault"
                  aria-selected="全部"
                  allow-clear
                  placeholder="请选择"
                >
                  <a-select-option value=""> 全部 </a-select-option>
                  <a-select-option value="Y"> 是 </a-select-option>
                  <a-select-option value="N"> 否 </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="父id">
                  <a-input v-model="queryParam.parentId" allow-clear placeholder="请输入父id" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="区域级别">
                  <a-input v-model="queryParam.level" allow-clear placeholder="请输入区域级别" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="排序">
                  <a-input v-model="queryParam.orderList" allow-clear placeholder="请输入排序" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="是否父分组">
                  <a-input v-model="queryParam.isParent" allow-clear placeholder="请输入是否父分组" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="是否启用">
                  <a-input v-model="queryParam.isEnable" allow-clear placeholder="请输入是否启用" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="">
                  <a-input v-model="queryParam.code" allow-clear placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="">
                  <a-input v-model="queryParam.source" allow-clear placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="创建人">
                  <a-input v-model="queryParam.createUserId" allow-clear placeholder="请输入创建人" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="创建时间">
                  <a-date-picker
                    style="width: 100%"
                    placeholder="请选择创建时间"
                    v-model="queryParam.createDateDate"
                    @change="onChangecreateDate"
                  />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="更新人">
                  <a-input v-model="queryParam.modifyUserId" allow-clear placeholder="请输入更新人" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="更新时间">
                  <a-date-picker
                    style="width: 100%"
                    placeholder="请选择更新时间"
                    v-model="queryParam.modifyDateDate"
                    @change="onChangemodifyDate"
                  />
                </a-form-item>
              </a-col>
            </template>
            <a-col :md="6" :sm="10">
              <span class="table-page-search-submitButtons">
                <template class="table-operator" slot="operator">
                  <x-down v-if="hasPerm('biIndexType:export')" ref="batchExport" @batchExport="batchExport" />
                </template>

                <a-button type="primary" @click="load()">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => (queryParam = {})">重置</a-button>

                <!-- <a @click="toggleAdvanced" style="margin-left: 8px">
                  {{ advanced ? '收起' : '展开' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a> -->
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- <s-table
        ref="table"
        :rowKey="(record) => record.id"
        :columns="columns"
        :alert="false"

        :data="loadData"
        :expanded-row-keys.sync="expandedRowKeys"
      >
        <template class="table-operator" slot="operator" v-if="hasPerm('biIndexType:add')" >
          <a-button type="primary" v-if="hasPerm('biIndexType:add')" icon="plus" @click="$refs.addForm.add()">新增指标类型</a-button>
          <a-button type="danger" :disabled="selectedRowKeys.length < 1" v-if="hasPerm('biIndexType:delete')" @click="batchDelete"><a-icon type="delete"/>批量删除</a-button>
          <x-down
            v-if="hasPerm('biIndexType:export')"
            ref="batchExport"
            @batchExport="batchExport"
          />
        </template>
        <span slot="action" slot-scope="text, record">
          <a v-if="hasPerm('biIndexType:edit')" @click="$refs.editForm.edit(record)">编辑</a>
          <a-divider type="vertical" v-if="hasPerm('biIndexType:edit') & hasPerm('biIndexType:delete')"/>
          <a-popconfirm v-if="hasPerm('biIndexType:delete')" placement="topRight" title="确认删除？" @confirm="() => singleDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table> -->
      <div style="margin-bottom: 10px">
        <a-button type="primary" icon="plus" @click="$refs.addForm.add()">新增</a-button>
        <a-upload name="file" :accept="accept" :customRequest="customRequest" :showUploadList="false">
          <a-button :loading="excelUploadLoading" style="margin-left: 8px"> <a-icon type="upload" /> 导入 </a-button>
        </a-upload>
        <a style="float: right" :href="patentExcelTemp" download="模板.csv"><a-icon type="download" /> 下载模板</a>
      </div>

      <a-table :columns="columns" :data-source="dataList" :rowKey="(record) => record.id" :pagination="false">
        <span slot="isEnable" slot-scope="text, record">
          <span>
            <a-switch
              :loading="record.loading"
              v-model="record.isEnable"
              checked-children="是"
              un-checked-children="否"
              @change="biIndexTypeIsEnable(record), (record.loading = true)"
            />
          </span>
        </span>
        <span slot="isDefault" slot-scope="text">
          <span v-if="text == 'Y'"> 是 </span>
          <span v-if="text == 'N'"> 否 </span>
        </span>

        <span slot="action" slot-scope="text, record">
          <a v-if="hasPerm('biIndexType:edit')" @click="$refs.editForm.edit(record)">编辑</a>
          <!-- <a-divider type="vertical" v-if="hasPerm('biIndexType:edit') & hasPerm('biIndexType:delete')" /> -->
          <!-- <a-popconfirm
            v-if="hasPerm('biIndexType:isEnable')"
            placement="topRight"
            :title="record.isEnable == '1' ? '确认停用' : '确认启用'"
            @confirm="biIndexTypeIsEnable(record)"
          >
            <a v-if="record.isEnable == '1'">停用</a>
            <a v-if="record.isEnable == '0'">启用</a>
          </a-popconfirm> -->
          <a-divider type="vertical" v-if="hasPerm('biIndexType:edit') & hasPerm('biIndexType:delete')" />
          <a-popconfirm
            v-if="hasPerm('biIndexType:delete')"
            placement="topRight"
            title="确认删除？"
            @confirm="() => singleDelete(record)"
          >
            <a>删除</a>
          </a-popconfirm>
          <a-divider type="vertical" v-if="hasPerm('biIndexType:edit') & hasPerm('biIndexType:delete')" />
          <a v-if="hasPerm('biIndexType:edit')" @click="showIndexData(record.id), (visible = true)">数据列表</a>
        </span>
      </a-table>
      <add-form ref="addForm" @ok="handleSuccess" />
      <edit-form ref="editForm" @ok="handleSuccess" />
    </a-card>

    <div style=" width : 1200px; heigh: 500px">
      <a-modal :width="1200" :heigh="200" title="数据列表" :visible="visible" @ok="handleOk" @cancel="handleCancel" :footer="null">
        <a-table
          :scroll="scroll"
          size="small"
          :dropdown-style="{ maxHeight: '200px', overflow: 'auto' }"
          ref="table"
          :columns="IndexDatacolumns"
          :data-source="indexDataList"
        >
          <span slot="timeValue" slot-scope="text, record">
            <span> {{ record.day != '' ? record.day : record.month == '' ? record.month : record.year }} </span>
            <!-- <span> {{record}}</span> -->
          </span>
        </a-table>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { STable, XDown } from '@/components'
import moment from 'moment'
import {
  biIndexTypePage,
  biIndexTypeDelete,
  biIndexTypeUpload,
  biIndexTypeIsEnable,
  biIndexTypeExport
} from '@/api/modular/main/baseIndex/biIndexTypeManage'
import { biIndexDataByTypeId } from '@/api/modular/main/biindexdata/biIndexDataManage'
import addForm from './addForm.vue'
import editForm from './editForm.vue'

export default {
  components: {
    STable,
    addForm,
    editForm,
    XDown
  },
  data() {
    return {
      loading: false,
      visible: false,
      excelUploadLoading: false,
      accept: '.csv',
      headers: {
        authorization: 'authorization-text',
      },
      // 下载模板
      patentExcelTemp: '/excel/moban.csv',
      expandedRowKeys: [],
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      queryParam: {},
      scroll: {
        y: 280
      },
      // 指标数据表头
      IndexDatacolumns: [
        {
          title: '省',
          align: 'center',
          dataIndex: 'provName',
        },
        {
          title: '市',
          align: 'center',
          dataIndex: 'cityName',
        },
        {
          title: '区/县',
          align: 'center',
          dataIndex: 'countryName',
        },
        {
          title: '时间',
          align: 'center',
          dataIndex: 'timeValue',
          scopedSlots: { customRender: 'timeValue' },
        },
        {
          title: '指标类型',
          align: 'center',
          dataIndex: 'name',
        },
        {
          title: '值',
          align: 'center',
          dataIndex: 'value',
        },
      ],
      // 表头
      columns: [
        {
          title: '指标名称',
          align: 'center',
          dataIndex: 'name',
          width: '15%',
          align: 'left',
          indentSize: 30,
        },
        // {
        //   title: '指标编码',
        //   align: 'center',
        //   dataIndex: 'code',
        // },
        // {
        //   title: '父名称',
        //   align: 'center',
        //   dataIndex: 'parentId',
        // },
        // {
        //   title: '区域级别',
        //   align: 'center',
        //   dataIndex: 'level',
        // },
        // {
        //   title: '排序',
        //   align: 'center',
        //   dataIndex: 'orderList',
        //   align: 'left',
        //   width: '15%',
        // },
        {
          title: '指标说明',
          align: 'center',
          dataIndex: 'description',
          width: '40%',
        },

        {
          title: '是否为默认指标',
          align: 'center',
          dataIndex: 'isDefault',
          width: '15%',
          scopedSlots: { customRender: 'isDefault' }
        },

        {
          title: '是否启用',
          align: 'center',
          dataIndex: 'isEnable',
          width: '15%',
          scopedSlots: { customRender: 'isEnable' },
        },
        // {
        //   title: '',
        //   align: 'center',
        //   dataIndex: 'source',
        // },
        // {
        //   title: '创建者',
        //   align: 'center',
        //   dataIndex: 'createUserId',
        // },
        // {
        //   title: '创建时间',
        //   align: 'center',
        //   dataIndex: 'createDate',
        // },
        // {
        //   title: '更新者',
        //   align: 'center',
        //   dataIndex: 'modifyUserId',
        // },
        // {
        //   title: '更新时间',
        //   align: 'center',
        //   dataIndex: 'modifyDate',
        // },
      ],
      tstyle: { 'padding-bottom': '0px', 'margin-bottom': '10px' },
      // 加载数 据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return biIndexTypePage(Object.assign(parameter, this.queryParam)).then((res) => {
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        alert: {
          show: true,
          clear: () => {
            this.selectedRowKeys = []
          },
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
        },
      },
      dataList: [],
      indexDataList: [],
      indexDataParams: {
        typeId: '',
      },
    }
  },
  created() {
    if (this.hasPerm('biIndexType:edit') || this.hasPerm('biIndexType:delete')) {
      this.columns.push({
        title: '操作',
        width: '150px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
      })
    }
    this.load()
  },
  methods: {
    moment,
    /**
     * 修改状态
     */
    biIndexTypeIsEnable(record) {
      const that = this
      const param = { id: record.id, isEnable: record.isEnable }
      biIndexTypeIsEnable(record).then((res) => {
        if (res.success) {
          console.log('??')
          that.$message.success('启用/停用成功')
          this.load()
          this.loading = false
        } else {
          that.$message.error('启用/停用失败')
        }
      })
    },
    // 指标列表 （tree）
    load() {
      const _that = this
      biIndexTypePage(this.queryParam).then((res) => {
        if (res.success) {
          _that.dataList = res.data
        }
      })
    },
    // 导入excel
    customRequest(data) {
      const formData = new FormData()
      formData.append('file', data.file)
      this.excelUploadLoading = true
      biIndexTypeUpload(formData)
        .then((res) => {
          if (res.success) {
            this.$message.success('导入excel成功')
            this.handleSuccess()
          } else {
            this.$message.warning('导入excel失败')
          }
        })
        .finally(() => {
          this.excelUploadLoading = false
        })
    },
    /**
     * 查询参数组装
     */
    switchingDate() {
      const queryParamcreateDate = this.queryParam.createDateDate
      if (queryParamcreateDate != null) {
        this.queryParam.createDate = moment(queryParamcreateDate).format('YYYY-MM-DD')
        if (queryParamcreateDate.length < 1) {
          delete this.queryParam.createDate
        }
      }
      const queryParammodifyDate = this.queryParam.modifyDateDate
      if (queryParammodifyDate != null) {
        this.queryParam.modifyDate = moment(queryParammodifyDate).format('YYYY-MM-DD')
        if (queryParammodifyDate.length < 1) {
          delete this.queryParam.modifyDate
        }
      }
      const obj = JSON.parse(JSON.stringify(this.queryParam))
      return obj
    },
    /**
     * 单个删除
     */
    singleDelete(record) {
      const param = [{ id: record.id }]
      this.biIndexTypeDelete(param)
    },
    /**
     * 批量删除
     */
    batchDelete() {
      const paramIds = this.selectedRowKeys.map((d) => {
        return { id: d }
      })
      this.biIndexTypeDelete(paramIds)
    },
    biIndexTypeDelete(record) {
      biIndexTypeDelete(record).then((res) => {
        if (res.success) {
          this.load()
          this.$message.success('删除成功')
          this.$refs.table.clearRefreshSelected()
        } else {
          this.$message.error('删除失败') // + res.message
        }
      })
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    onChangecreateDate(date, dateString) {
      this.createDateDateString = dateString
    },
    onChangemodifyDate(date, dateString) {
      this.modifyDateDateString = dateString
    },
    /**
     * 批量导出
     */
    batchExport() {
      const paramIds = this.selectedRowKeys.map((d) => {
        return { id: d }
      })
      biIndexTypeExport(paramIds).then((res) => {
        this.$refs.batchExport.downloadfile(res)
      })
    },
    handleSuccess() {
      this.load()
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleOk(e) {
      this.ModalText = 'The modal will be closed after two seconds'
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCancel(e) {
      console.log('Clicked cancel button')
      this.visible = false
    },
    showIndexData(id) {
      this.queryParam.id = id
      biIndexDataByTypeId(this.queryParam).then((res) => {
        if (res.success) {
          this.indexDataList = res.data
        }
      })
    },
  },
}
</script>
<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
</style>
